<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))

      this.chart.setOption({
        grid: {
          top: '12%',
          left: '3%',
          right: '2%',
          bottom: '8%',
          containLabel: true
        },
        tooltip: {
          backgroundColor: 'rgba(50,50,50,0.7)',
          borderWidth: 0,
          textStyle: {
            color: '#FFF'
          },
          formatter: (params) => {
            return `<div style="display: flex;align-items: center;">
                    <span style="flex:1;">年化收益率:</span> 
                    <span style="margin-left: 10px;font-weight: bold;"> ${params.value[0]}%</span>
                    </div>
                    <div style="display: flex;align-items: center;">
                    <span style="flex:1;">年化波动率</span> 
                    <span style="margin-left: 10px;font-weight: bold;"> ${params.value[1]}%</span>
                    </div>`
          }
        },
        xAxis: { 
          name: '年化波动率(%)',
          nameLocation: 'center',
          nameGap: 30,
          gridIndex: 0,
          // min: 0,
          // max: 20,
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
        },
        yAxis: { 
          name: '年化收益率(%)',
          nameLocation: 'center',
          nameGap: 40,
          gridIndex: 0,
          // min: 0,
          // max: 15,
          axisLine: {
            lineStyle: {
              color: '#90979c'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          },
        },
        series: [
          {
            name: 'I',
            type: 'scatter',
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [this.data]
          }
        ]
      })
    }
  }
}
</script>
